<link rel="stylesheet" type="text/css" href="<?php echo base_url() ?>templates/css/jquery-ui-1.8.23.custom.css">
<style>
    #project-label {
        display: block;
        font-weight: bold;
        margin-bottom: 1em;
    }
    #project-icon {
        float: left;
        height: 32px;
        width: 32px;
    }
    #project-description {
        margin: 0;
        padding: 0;
    }
</style>

<form name="frmAddOrderProduct" id="frmAddOrderProduct" action="<?php echo base_url("orders/save_order_product"); ?>">
    <table class="form" align="center">
        <tr>
            <td class="required label" style="width: 150px;">Mã sản phẩm</td>
            <td><!--<input type="text" name="product_code" id="product_code" class="w250" value="">-->
                <input id="product_name" name="product_name" class="w250" value="" />
                <input type="hidden" id="product_code" value="" name="product_code" />
            </td>
        </tr> 
        <tr>
            <td class="required label" style="width: 150px;">Số lượng</td>
            <td><input type="text" name="quantity" id="quantity" class="w250" value=""></td>
        </tr> 
        <tr>
            <td class="label">Giá</td>
            <td>
                <select name="type_price" id ="type_price" style="background:#ffffff;">
                    <option value="0" >Chọn loại giá bán</option>
                    <option value="1" >Giá lẻ</option>
                    <option value="2" >Giá sỉ</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="button" name="bt_submit" value="" id="save_order_product" class="capnhat">
                <input type="hidden" name="order_id" value="<?php echo $order_id; ?>" />
            </td>
        </tr>  
    </table>
</form>
<script type="text/javascript" src="<?php echo base_url() ?>templates/js/jquery-ui-1.8.23.custom.min.js"></script>

<script>
    $(function() {
        var projects = [
            <?php if ($product_items) {
                foreach ($product_items as $product_item) {
                    ?>
                                {
                                    value: "<?php echo $product_item->code ?>",
                                    label: "<?php echo $product_item->name ?>"
                                },
                <?php }
            }
            ?>
        ];

        $("#product_name").autocomplete({
            minLength: 0,
            source: projects,
            focus: function(event, ui) {
                $("#project").val(ui.item.label);
                return false;
            },
            select: function(event, ui) {
                $("#product_name").val(ui.item.label);
                $("#product_code").val(ui.item.value);

                return false;
            }
        })
                .data("ui-autocomplete")._renderItem = function(ul, item) {
            return $("<li>")
                    .append("<a>" + item.label + "<br>" + item.desc + "</a>")
                    .appendTo(ul);
        };
    });
</script>